<template>
  <!--  市场和门店树-->
  <div style="padding-top: 5px;">
    <el-input v-model="filterDeptSearch" placeholder="搜索服务类别"/>
    <el-tree :data="serverCategoryTreeData" :props="defaultDeptTreeProps" node-key="categoryId" :filter-node-method="filterNode"
             @node-click="handleNodeClick" default-expand-all :highlight-current="true"
             accordion
             :expand-on-click-node="false"
             style="border: 1px;padding: 2px;margin: 2px;" ref="treeRef">
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import {ElTree} from 'element-plus'
import {onMounted, reactive, ref, watch} from 'vue'
import {Params} from "@/apis/model/common/common.interfaces"
import {serverCategoryPage} from "@/apis/http/server/ServerCategoryHttp";
import {ServerCategory} from "@/apis/model/server/ServerCategoryModel";

const emits = defineEmits(['serverCategoryTreeClick']);

// 机构树
const serverCategoryTreeData: any = ref<Array<ServerCategory>>([])
const filterDeptSearch = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterDeptSearch, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: ServerCategory) => {
  if (!value) return true
  return data.name.includes(value)
}

const defaultDeptTreeProps = {
  children: 'children',
  label: 'name',
}

const initServerCategory = () => {
  const params: Params = reactive({
    current: 1,
    size: 9999,
    search: '',
    entity: {statusFlag: 1, delFlag: 0}
  })
  serverCategoryPage(params).then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      serverCategoryTreeData.value = data.list
    }
  })
}

const handleNodeClick = (node: any) => {
  emits('serverCategoryTreeClick', {
    categoryId: node.categoryId
  })
}

onMounted(() => {
  initServerCategory()
})
</script>

<style>
</style>
